import {
  PageContainer,
} from '@ant-design/pro-components';
import React, { createRef, useCallback, useEffect, useRef, useState } from 'react';
import { Button, Card, Checkbox, Col, Form, Input, InputRef, Row, Timeline } from 'antd';
import CreateForm from '@/pages/Home/components/CreateForm';
import CourseUsedForm from '@/pages/Home/components/CourseUsedForm';



const StudentList: React.FC<unknown> = () => {

  const [cmdModalVisible, setCmdModalVisible] = useState<boolean>(false);
  const [inputValue, setInputValue] = useState<string>('');

  const handleCmdChange = (event) => {
    if (event.key === 'Enter' && !event.shiftKey) {
      const cmd = inputValue;
      console.log(cmd);
      setInputValue(''); // 清空输入框
      setCmdModalVisible(true);
    }
  };

  return (
    <PageContainer
      header={{
        title: '悦咖驾驶舱',
      }}
    >
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Input
            placeholder="快速命令工具, 按下回车后执行命令"
            value={inputValue}
            onKeyPress={handleCmdChange}
            onChange={(e) => setInputValue(e.target.value)}
          />
        </Col>
      </Row>

      <CourseUsedForm
        onSubmit={async (value) => {}}
        onCancel={() => {
          setCmdModalVisible(false);
        }}
        visible={cmdModalVisible}
      />
    </PageContainer>
  );
};

export default StudentList;
